<template>
    <table cellspacing="0" colspacing="0" class="w-100">
        <tr>
            <td>接口名称</td>
            <td colspan="3">{{ apiInfo.name }}</td>
        </tr>
        <tr>
            <td>接口类型</td>
            <td>{{ apiInfo.method }}</td>
            <td width="100px">接口地址</td>
            <td>{{ "/dua/" + apiInfo.path }}</td>
        </tr>
        <tr>
            <td>输入参数</td>
            <td colspan="3">
                <div v-if="!apiConfig.inputParams">未定义</div>
                <div class="p-4" v-else>
                    <base-table :dataSupplier="() => apiConfig.inputParams" :fields="inputFields" :pageable="false" :key="apiInfo.id"> </base-table>
                </div>
            </td>
        </tr>
        <tr>
            <td>输出参数</td>
            <td colspan="3">
                <div v-if="!apiConfig.output">未定义</div>
                <div class="p-4" v-else>
                    <base-table :dataSupplier="() => apiConfig.output" :fields="outputFields" :pageable="false" :key="apiInfo.id"> </base-table>
                </div>
            </td>
        </tr>

        <tr>
            <td>调用示例</td>
            <td colspan="3">
                <div class="p-4">
                    <div>{{ curlTest }}</div>
                    <div class="mt-2">实际调用中请替换token</div>
                </div>
            </td>
        </tr>

        <tr>
            <td>输出示例</td>
            <td colspan="3">
                <monacoEditor :language="outputLang" v-model="outputExp" :editorOptions="{ readOnly: true }" height="500px" />
            </td>
        </tr>
    </table>
</template>
<script setup>
import monacoEditor from "@/components/monaco-editor.vue";
import * as entityApis from "@/apis/entity";
import { watch } from "vue";

const apiInfo = ref({});
const apiConfig = ref({});
const outputLang = ref("json");
const outputExp = ref("");
const props = defineProps({
    apiId: String,
});

const host = computed(() => {
    let href = window.location.href.replace("http://", "");
    let idx = href.indexOf("/");
    href = href.substring(0, idx);
    return href;
});
const curlTest = computed(() => {
    let { method, path } = apiInfo.value;
    let { testData } = apiConfig.value;

    let result = `curl -X ${method} http://${host.value}/api/dua/${path}`;

    if (!testData) {
        return result;
    }

    if (method == "post") {
        if (testData.body) {
            result += ` -d '${testData.body}' -H 'Content-Type: application/json'`;
        }
    } else {
        if (testData.queryParams && testData.queryParams.length) {
            let str = testData.queryParams.map(({ code, value }) => code + "=" + value).reduce((s1, s2) => s1 + "&" + s2);
            result += "?" + str;
        }
    }

    result += ` -H 'Authorization: token'`;

    return result;
});

const outputFields = ref([
    { label: "参数编码", prop: "code", disabled: (val, row) => val == "*" },
    {
        label: "参数名",
        prop: "name",
    },
    {
        label: "参数类型",
        prop: "type",
        width: "120px",
        type: "select",
        options: [
            { label: "无限制", value: "unknown" },
            { label: "字符串", value: "string" },
            { label: "整数", value: "int" },
            { label: "小数", value: "float" },
            { label: "数组", value: "array" },
            { label: "对象", value: "object" },
        ],
        change: (val, row) => {
            // 非对象、数组类型时需要清空children
            if (val == "array") {
                row.children = [{ code: "*", name: "存储对象类型", type: "string", readonly: true }];
                return;
            }

            delete row.children;
        },
    },
    { label: "备注", prop: "remark" },
]);

const inputFields = ref([
    { label: "参数编码", prop: "code" },
    {
        label: "参数名",
        prop: "name",
    },
    { label: "参数类型", prop: "type", width: "120px", type: "select" },
    { label: "必需", prop: "required", width: "60px", type: "checkbox" },
    { label: "示例值", prop: "default", width: "120px" },
    { label: "备注", prop: "remark" },
]);

onMounted(() => {
    getApiInfo();
});

watch(() => props.apiId, getApiInfo);

// 获取接口详情
function getApiInfo() {
    if (!props.apiId) {
        return;
    }

    entityApis.findById("/base/api", props.apiId).then((resp) => {
        apiInfo.value = resp;
        let content = resp.content;
        apiConfig.value = JSON.parse(content);

        let exp = apiConfig.value.outputExample;
        if (!exp) {
            outputExp.value = "";
            return;
        }
        if (exp.startsWith('"')) {
            exp = exp.substring(1);
            if (exp.endsWith('"')) {
                exp = exp.substring(0, exp.length - 1);
            }
        }

        if (exp.startsWith("[") || exp.startsWith("{")) {
            outputLang.value = "json";
        } else if (exp.startsWith("<?xml")) {
            outputLang.value = "xml";
            exp = exp.replace(/\\"/g, '"');
            exp = app.utils.formatXml(exp);
        } else {
            outputLang.value = "text";
        }

        outputExp.value = exp;
    });
}
</script>

<style lang="scss" scoped>
table {
    --border: 1px solid #e2e8ee;
    border: var(--border);
}

tr {
    td {
        padding: 4px 8px;
        line-height: 30px;
        border-bottom: var(--border);
        border-right: var(--border);
    }

    td:nth-child(odd) {
        background: #f6f9ff;
        min-width: 100px;
        max-width: 100px;
        text-align: right;
    }
}
</style>
